<template>
  <!-- 全部商品 -->
  <div class="goods">
    <div class="wrap">
      <Crumb> </Crumb>
      <img src="@/assets/img/banner.4c6b6225.png" width="100%" alt="" />
      <ul class="options">
        <li>
          <strong>排序：</strong>
          <span
            :class="{ active: index == form.GoodsCoinIndex1 }"
            v-for="(item, index) in GoodsCoin1"
            :key="index"
            @click="GoodsCoinFn1(item.min, item.max, index)"
            >{{ item.txt }}</span
          >
        </li>
        <li>
          <strong>分类：</strong>
          <span
            :class="{ active: index == form.GoodsCoinIndex2 }"
            v-for="(item, index) in GoodsCoin2"
            :key="index"
            @click="GoodsCoinFn2(item.type, index)"
            >{{ item.txt }}</span
          >
        </li>
      </ul>
      <List :arr="GoodsListShow" />
      <div class="center">
        <span
          :class="form.isReachBtn ? '' : 'iconfont icon-loading rotate'"
        ></span>
        <span>{{ form.isReachBtn ? "加载完毕" : "正在加载中..." }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import List from "@/components/home/List.vue";
import Crumb from "@/components/crumb/crumb.vue";
import { getScrollTop, getClientHeight, getScrollHeight } from "@/utils";
import { GoodsSearchAPI } from "@/http/api";
import { onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
import { useRoute } from "vue-router";

const router = useRoute();
const form = reactive({
  page: 1, //页数
  size: 8, //大小
  GoodsCoinIndex1: 0, //点击排序文字的下标
  GoodsCoinIndex2: 0, //点击分类文字的下标
  isLoading: false, //是否正在加载下一页数据
  isReachBtn: false, //判断是否到加载完毕了
});
//分类数组项
const GoodsCoin2 = reactive([
  { type: 0, txt: "全部" },
  { type: 1, txt: "实物礼品" },
  { type: 2, txt: "虚拟礼品" },
]);
//排序列表数组项
const GoodsCoin1 = reactive([
  { min: 0, max: 0, txt: "全部" },
  { min: 0, max: 0, txt: "我还可以兑换" },
  { min: 0, max: 500, txt: "0-500个" },
  { min: 500, max: 1000, txt: "500-1000分" },
  { min: 1000, max: 1500, txt: "1000-1500分" },
  { min: 1500, max: 2500, txt: "1500-2500分" },
  { min: 2500, max: 6500, txt: "2500-6500分" },
  { min: 6500, max: 10000, txt: "6500-10000分" },
]);
//商品列表
const GoodsList = ref<IGoodsList[]>([]);
//控制商品列表显示多少
const GoodsListShow = ref<IGoodsList[]>([]);
//请求商品所需参数
const params = reactive({
  did: 0, //栏目 1-精品推荐 2-热门兑换 0-全部
  type: 0, // 类型 1-实体商品 2-虚拟商品 0-全部
  min: 0, //最小积分
  max: 0, //最大积分(最多是1000)   0-当传入0的时候，会直接返回所有商品，无视后台逻辑。
  keyword: "", //商品关键字
});

//封装请求商品
const GoodsSearch = () => {
  //进入页面判断地址栏是否携带关键字
  if (router.query.keyword) {
    params.keyword = router.query.keyword + "";
  } else {
    params.keyword = "";
  }
  //发起商品信息请求
  GoodsSearchAPI(params).then((res) => {
    if (res.code === 0) {
      //商品列表赋值
      GoodsList.value = res.data;
      //让页面只显示8个商品
      GoodsListShow.value = GoodsList.value.filter((item, index) => {
        return index < 8;
      });
    }
    //初始化：默认加载第一页,解决全部加载完毕后点击其他选项显示加载完毕bug
    form.page = 1;
    //初始化:默认显示加载中
    form.isReachBtn = false;
    //判断是否加载完毕了,解决加载中点击其他选项没有数据也会显示正在加载中
    if (GoodsList.value.length == GoodsListShow.value.length) {
      //如果两个数组长度一致，显示加载完毕
      form.isReachBtn = true;
      return;
    }
  });
};
GoodsSearch(); //进入页面就调用
// 监听地址栏keyword关键字
watch(
  () => router.query.keyword,
  (toPath) => {
    //地址栏keyword关键字发生变化就重新请求数据
    GoodsSearch();
  },
  { immediate: true, deep: true }
);

//点击排序列表文字显示符合条件商品
const GoodsCoinFn1 = (min: number, max: number, index: number) => {
  //点击排序列表文字的下标赋值为移入下标
  form.GoodsCoinIndex1 = index;
  params.min = min;
  params.max = max;
  //调用请求商品信息请求筛选列表
  GoodsSearch();
};
//点击分类列表文字显示符合条件商品
const GoodsCoinFn2 = (type: number, index: number) => {
  //点击分类列表文字的下标赋值为移入下标
  form.GoodsCoinIndex2 = index;
  params.type = type;
  //调用请求商品信息请求筛选列表
  GoodsSearch();
};

//滚动事件
const scrollFn = () => {
  if (getClientHeight() + getScrollTop() >= getScrollHeight() - 100) {
    //判断是否加载完毕了
    if (GoodsList.value.length == GoodsListShow.value.length) {
      form.isReachBtn = true;
      return;
    }
    //节流
    if (form.isLoading == false) {
      form.isLoading = true; //开始加载下一页数据了
      form.page++; //下一页
      //用setTimeout解决防止这一页没加载玩，就去加载下一页
      setTimeout(() => {
        for (
          let i = (form.page - 1) * form.size;
          i < form.page * form.size;
          i++
        ) {
          GoodsList.value[i] && GoodsListShow.value.push(GoodsList.value[i]);
        }
        //加载完毕了
        form.isLoading = false;
      }, 1000);
    }
  }
};
onMounted(() => {
  //监听滚动事件
  window.addEventListener("scroll", scrollFn);
});
onBeforeUnmount(() => {
  // 取消监听
  window.removeEventListener("scroll", scrollFn);
});
</script>

<style lang="less" scoped>
@import "../assets/css/public.less";
//加载动画样式
.center {
  text-align: center;
  .rotate {
    display: inline-block;
    animation: dong 1.5s infinite;
    margin-right: 5px;
  }
  @keyframes dong {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

.goods {
  padding-bottom: 20px;
  background: #efefef;
  padding-top: 20px;
  .options {
    padding-top: 20px;
    padding-bottom: 40px;
    li {
      margin-top: 20px;
      strong {
        color: #000;
        font-weight: bold;
      }
      span {
        margin-right: 20px;
        margin-left: 10px;
        cursor: pointer;
        color: #999;
        &.active {
          color: @base-color;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
